<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第二种</title>
		<script src="js/jquery-1.11.1.min.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.wrap{
			width: 280px;
			margin: 0 auto;
			overflow: hidden;
			background-color: pink;
		}
		.wrap ul{
			width: 560px;
			overflow: hidden;
		}
		.wrap li{
			list-style: none;
			float: left;
			width: 60px;
			height: 100px;
			background-color: blue;
			margin-right: 10px;

		}
	</style>
</head>
<body>
	   <div class="wrap">
	   		<ul class="banner">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
			</ul>
   		</div>
   		<script>
   			$(function(){
   				//复制结构
   				var str=$(".banner").html()
   				$(".banner").html(str+str)
   				$(".banner").width($(".banner li").length*70)
   				//启动定时器
   				var index=0;
   				function moveChange(){
   					index++;
   					//走完一组图片 时，将Ul再次拉回0的位置
   					if(index>560){
   						$(".banner").css("marginLeft",0+"px")
   						index=0
   					}
   					$(".banner").css("marginLeft",-index+"px")
   				}
   				var t=setInterval(moveChange,20)
   			})
   		</script>
</body>
</html>